<template>
  <div class="text">
    <div class="form-wrapper">
      <ul>
        <li><h2>请登录/注册账号</h2></li>
        <li class="text-te input-item">请输入用户名:</li>
        <li id="unn">
          <input
            type="text"
            placeholder="请输入用户名:"
            ref="username"
            v-model="username"
          />
        </li>
        <li class="text-te" id="unn">请输入用户密码:</li>
        <li id="unn">
          <input
            type="password"
            placeholder="请输入用户密码:"
            ref="password"
            v-model="password"
          />
        </li>
        <li class="text-te" id="unn">请输入验证码:</li>
        <li id="unn">
          <input
            type="text"
            placeholder="请输入验证码"
            ref="captchaInput"
            v-model="captcha"
          />
        </li>
        <li class="num">
          <div class="captcha" @click="refreshCaptcha" ref="captcha">
            {{ arithmeticExpression }}
          </div>
        </li>
        <li>
          <button class="deng" @click="login">登录</button>
          <button class="zhu" @click="register">注册</button>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import { loginUtil } from "@/Service/login.js";
export default {
  mounted() {
    this.refreshCaptcha();
  },
  data() {
    return {
      username: "",
      password: "",
      captcha: "",
      arithmeticExpression: "",
    };
  },
  methods: {
    refreshCaptcha() {
      this.captcha = "";
      this.arithmeticExpression = loginUtil.generateRandomArithmetic();
    },
    async login() {
      if (this.isInputValid()) return;
      const res = await loginUtil.login(this.username, this.password);

      if (res.code != 200) {
        alert(res.message);
        this.refreshCaptcha();
        return;
      }
      loginUtil.updateLoginStatus(res.data.userId, res.data.token);
      this.$router.push("/main-page");
    },
    async register() {
      if (this.isInputValid()) return;
      const res = await loginUtil.register(this.username, this.password);
      console.log(res);
      if (res.code != 200) {
        alert("注册失败");
        this.refreshCaptcha();
        return;
      }
      alert("注册成功");
    },
    isInputValid() {
      if (!this.username || !this.password) {
        alert("账号或密码不能为空！");
        return true;
      }
      if (this.captcha != eval(this.arithmeticExpression)) {
        alert("验证码错误！");
        this.captcha = "";
        this.refreshCaptcha();
        return true;
      }
      return false;
    },
  },
};
</script>
<style scoped>
/* 基础容器样式 */
/* .text {
	width: 100vw;
	height: 100vh;
	background: #ccc;
} */
.form-wrapper {
  max-width: 480px;
  width: 90%;
  margin: 10rem auto;
  padding: 2.5rem;
  /* background: rgba(255, 255, 255, 0.98); */
  background: rgb(240, 240, 240);
  border-radius: 20px;
  box-shadow: 0 12px 24px -10px rgba(0, 0, 0, 0.1),
    0 8px 20px -15px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(12px);
  transform: translateY(-5px);
  transition: all 0.3s ease;
}
ul {
  list-style-type: none;
  width: 80%;
  margin: 10px auto;
  padding: 0;
}
ul li {
  width: 100%;
}
/* 标题样式 */
h2 {
  color: #2c3e50;
  font-size: 1.8rem;
  margin-bottom: 2rem;
  text-align: center;
  position: relative;
  padding-bottom: 0.5rem;
}

h2::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, #409eff 0%, #67c23a 100%);
}

.captcha {
  box-sizing: border-box;
  width: 200px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  font: bold 20px/40px "monospace";
  background: #ccc;
  border-radius: 20px;
  cursor: pointer;
}

/* 输入项优化 */
.text-te {
  color: #606266;
  margin-bottom: 0.8rem;
  font-size: 0.9rem;
}

#unn {
  margin-bottom: 1.5rem;
}

/* 现代输入框样式 */
input {
  box-sizing: border-box;
  width: 100%;
  padding: 12px 20px;
  border: 2px solid #ebeef5;
  border-radius: 8px;
  font-size: 1rem;
  transition: all 0.3s ease;
  background: rgba(255, 255, 255, 0.9);
}

input:focus {
  border-color: #409eff;
  box-shadow: 0 0 8px rgba(64, 158, 255, 0.2);
  background: #ffffff;
}

/* 按钮组优化 */
li:last-child {
  display: flex;
  gap: 1rem;
  margin-top: 2rem;
}

.deng,
.zhu {
  flex: 1;
  padding: 12px 0;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.3s ease;
  position: relative;
  overflow: hidden;
}

.deng {
  background: linear-gradient(135deg, #67c23a 0%, #5aaf36 100%);
  color: white;
}

.zhu {
  background: linear-gradient(135deg, #409eff 0%, #3375b9 100%);
  color: white;
}

/* 按钮交互效果 */
.deng:hover,
.zhu:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.1);
}

.deng:active,
.zhu:active {
  transform: translateY(1px);
}

/* 验证码区域美化 */
.num {
  background: rgba(240, 240, 240, 0.3);
  border-radius: 10px;
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.4);
}

.num h3 {
  font-family: "Courier New", monospace;
  letter-spacing: 4px;
  color: #2c3e50;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin: 0 auto;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .text {
    width: 95%;
    padding: 1.5rem;
  }

  h2 {
    font-size: 1.5rem;
  }

  input {
    padding: 10px 16px;
  }
}

/* 加载动画 */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
</style>